<template>
<div class="wodeList">
    <router-link to="/wodeDingd" tag="div">
        <div class="top" id="top">
            <div class="dingd"><span class="iconfont">&#xe629;</span>
                <div class="x">全部订单</div>
            </div>
            <div class="dingd"><span class="iconfont">&#xe69f;</span>
                <div class="x">待支付</div>
            </div>
            <div class="dingd"><span class="iconfont">&#xe6d6;</span>
                <div class="x">组团中</div>
            </div>
            <div class="dingd"><span class="iconfont">&#xe69f;</span>
                <div class="x">待使用</div>
            </div>
        </div>
    </router-link>
    <div class="buttom">
        <div class="desc">其他内容</div>
        <div class="qit"><samp class="iconfont" id="chongd">&#xe673;</samp>
            <div>充电订单</div>
        </div>
        <div class="qit"><samp class="iconfont" id="youh"> &#xe612;</samp>
            <div>优惠券</div>
        </div>
        <div class="qit"><samp class="iconfont" id="qianb"> &#xe602;</samp>
            <div>我的钱包</div>
        </div>
        <div class="qit"><samp class="iconfont" id="shouc"> &#xe652;</samp>
            <div>收藏</div>
        </div>
        <div class="qit"><samp class="iconfont" id="renz"> &#xe659;</samp>
            <div>用户认证</div>
        </div>
        <div class="qit"><samp class="iconfont" id="shangp"> &#xe610;</samp>
            <div>我的商铺</div>
        </div>
        <div class="qit"><samp class="iconfont" id="bangz"> &#xe611;</samp>
            <div>帮助中心</div>
        </div>
        <div class="qit"><samp class="iconfont" id="fank"> &#xe631;</samp>
            <div>我要反馈</div>
        </div>

    </div>
</div>
</template>

<script>
export default {
    name: 'wodeList',
    data() {
        return {
            zys: '',
        }
    },

}
</script>

<style scoped>
.wodeList {
    position: relative;
    top: -50px;
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 120%;
    background-color: rgb(240, 238, 238);
    z-index: 2;
    border-radius: 10px;

}

.top {
    width: 95%;
    height: 60px;
    background-color: #fff;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 10px;

}

.dingd {
    width: 23%;
    height: 100%;
    position: relative;
    left: 10px;
    text-align: center;
    padding-top: 5px;
    display: inline-block;
}

.dingd span {
    font-size: 30px;
    margin-bottom: 0px;
}

.x {
    margin-top: 8px;
}

.buttom {
    width: 95%;
    height: 180px;
    background-color: #fff;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 10px;
    position: relative;

}

.desc {
    position: relative;
    left: 18px;
    top: 11px;
    bottom: 20px;
    font-weight: bold;
}

.qit {
    position: relative;
    left: 10px;
    top: 20px;
    bottom: 30px;
    width: 23%;
    height: 80px;

    text-align: center;
    display: inline-block;
}

.iconfont {
    font-size: 27px;
    color: rgb(255, 119, 22);

}

#qianb,
#bangz {
    color: rgb(253, 103, 2);
}

#chongd {
    height: 25px;
    width: 25px;
    background-color: rgb(253, 103, 2);
    border-radius: 5px;
    color: rgb(255, 255, 255);
}

#youh,
#shouc,
#shangp {
    color: rgb(250, 10, 10);
}

#renz,
#fank {
    color: rgb(56, 56, 245);
}
</style>
